<template>
	<div class="cell-item">
		<u-icon :size="iconSize" :name="icon" v-if="icon" />
		<div class="title">
			<span>{{title}}</span>
			<template v-if="isTitleValue">
				<span style="font-size: 1.2em;">{{titleValue}}</span>
				<span>{{unit}}</span>
			</template>
		</div>
		<slot>
			<u-tag size="mini" v-if="isSub" :text="subText" plain shape="circle" />
		</slot>
	</div>
</template>

<script>
	export default {
		name: "cell-item",
		props: {
			title: {},
			subTitle: {},
			subValue: {},
			unit: {},
			titleValue: {},
			isTitleValue: {
				default: true
			},
			isSub: {
				default: true
			},
			subUnit: {},
			// 左侧图标src
			icon: {
				type: String,
				default: ''
			},
			// 左边图标的大小
			iconSize: {
				type: [Number, String],
				default: 17
			},
		},
		computed: {
			subText() {
				const {
					subTitle,
					subValue,
					unit,
					subUnit
				} = this;
				return `${subTitle??''} ${subValue??''} ${subUnit || (unit??'')}`;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.cell-item {
		padding: 13px 16px;
		display: flex;
		align-items: center;
		gap: 5px;

		.left-icon {}

		.title {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 5px;
			font-size: 13px;
		}
	}
</style>